<template>
    <div id="login">
        <h1>{{ msg }}</h1>
        <h2>{{password}}</h2>
        姓名:<input type="text" v-model="username">
        {{username}}
        密码:<input type="text" v-model="password">
        {{password}}
        <br>
        <input type="button" value="注册" @click="register">
        <!--翻页-->
        <div v-if="totalPage > 1" class="c-search-condition c-clearfix">
            <pagination :total-page="totalPage" @change-page="getData" ref="pagination"></pagination>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    import pagination from '@/component/pagination';

    export default {
        // name: 'login',
        components: {pagination},
        data: function () {
            return {
                citise: [],
                userList: [],
                username: "",
                password: 'judian3321',
                totalPage: 10,
                msg: 'hello.vue',
                loading: '',
            }
        },
        methods: {
            clickHandler: function (firstName) {
                this.age = firstName;
            },
            register: function () {
                let target = document.getElementById("login");
                console.log(target);
                this.loading = this.$loading({
                    text: '加载中...',
                    background: 'rgba(0,0,0,0,7)',
                    target: target,
                    spinner: 'el-icon-loading',
                });
                axios({
                    method: 'post',
                    url: API_PATH + '/register',
                    dataType: 'json',
                    params: {
                        username: this.username,
                        password: this.password
                    }
                }).then(
                    res => {
                        console.log("2xx");
                        console.log(res);
                        this.loading.close();
                    },
                    xhr => {
                        console.log("非2xx响应")
                        this.loading.close();
                    }
                );
            },
            /*翻页跳转处理，传入页数*/
            getData: function (page) {
                console.log("======页数==" + page);
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h1, h2 {
        font-weight: normal;
    }
</style>
